<template>
  <div class="frame">
    <!-- <router-view class="main"/> -->
    <component :is="active" class="main"></component>

    <div class="fixed-wrap"></div>
    <van-tabbar v-model="active" active-color="#ef6762">
      <van-tabbar-item icon="home-o" name="Home" badge="12">
        <template #icon>
          <img src="@/assets/images/home/header/home-nav-icon.png" />
        </template>
      首页
      </van-tabbar-item>
      <van-tabbar-item icon="search" name="SgVideo">
        <template #icon>
          <img src="@/assets/images/home/header/video-nav-icon.png" />
        </template>
        视频
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" name="People">
        <template #icon>
          <img src="@/assets/images/home/header/people-nav-icon.png" />
        </template>
        掌上民声
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" name="Service">
        <template #icon>
          <img src="@/assets/images/home/header/service-nav-icon.png" />
        </template>
        服务
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" name="Mine">
        <template #icon>
          <img src="@/assets/images/home/header/mine-nav-icon.png" />
        </template>
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Home from './components/home'
import SgVideo from './components/video'
import People from './components/people'
import Service from '../services/services'
import Mine from './components/mine'
export default {
  name: 'Center',
  components:{
    Home,
    SgVideo,
    People,
    Service,
    Mine,
  },
  data () {
    return {
      active: 'Home'
    }
  }
}
</script>

<style lang="scss" scoped>
.frame{
  .main{
    margin-bottom: 52px;
  }
}
</style>
